<template>
    <div v-loading="pageLoading" class="flex flex-1 overflow-hidden">
        <!-- 配置区域 -->
        <el-form class="layout-forms" label-position="left" label-width="100px">
            <div class="p-4">
                <tabs-pane
                    mode="default"
                    face="grey"
                    :index="tabIndex"
                    :list="tabLists"
                    @change="handleChangeTab"
                />
            </div>
            <div class="t-2 flex-1 overflow-hidden">
                <el-scrollbar>
                    <app-basis v-show="tabIndex === 0" v-model="formData" />

                    <app-model v-show="tabIndex === 1" v-model="formData" />

                    <app-pages v-show="tabIndex === 2" v-model="formData" />
                </el-scrollbar>
            </div>
            <div class="footer-container">
                <el-button
                    type="primary"
                    :loading="postLoading"
                    @click="handleSubmit"
                >保存设定</el-button>
            </div>
        </el-form>

        <!-- 调试区域 -->
        <app-debug v-model="formData" />
    </div>
</template>

<script setup lang="ts">
import robotSmarterApi from '~/api/agent/robot/smarter'
import AppBasis from '../_applications/app-basis.vue'
import AppModel from '../_applications/app-model.vue'
import AppPages from '../_applications/app-pages.vue'
import AppDebug from '../_applications/app-debug.vue'

const emits = defineEmits(['update'])
const props = withDefaults(
    defineProps<{
        robot: RobotSmarterDetailResponse
    }>(),
    {}
)

// 加载状态
const pageLoading = ref<boolean>(true)
const postLoading = ref<boolean>(false)

// 配置选项
const tabIndex = ref<number>(0)
const tabLists = ref([
    {name: '基础配置'},
    {name: '模型配置'},
    {name: '界面配置'}
])

// 表单数据
const formData = ref({
    code: props.robot.code,   // 智能体编号
    logo: '',                 // 智能体图标
    name: '',                 // 智能体名称
    intro: '',                // 智能体简介
    search_mode: '',          // 检索的模式: [语义, 全文, 混合]
    search_tokens: 5000,      // 检索引用数: [100 ~ 30000]
    search_similar: 0.4,      // 检索相似度: [0 ~ 1]
    annex_similar: 0.4,       // 附件相似度: [0 ~ 1]
    ranking_status: 0,        // 检索的重排: [0=否, 1=是]
    ranking_score: 0.5,       // 重排分数
    ranking_model:'',         // 重排模型
    optimize_ask: 0,          // 问题优化: [0=否, 1=是]
    optimize_model: '',       // 问题模型
    prompt_roles: '',         // 角色提示词
    prompt_limit: '',         // 限定提示词
    welcome_text: '',         // 欢迎光临词
    question_guide: 0,        // 猜您想问的
    empty_search_text: '',    // 限定提示词
    empty_search_type: 'ai',  // 空搜索类型: [ai, default]
    max_upload_num: 0,        // 最大上传数: [0-15]
    is_upload_files: 0,       // 文档上传: [0=否, 1=是]
    is_upload_image: 0,       // 图片上传: [0=否, 1=是]
    is_web_search: 0,         // 联网搜索: [0=否, 1=是]
    is_show_timed: 0,         // 显示耗时: [0=否, 1=是]
    is_show_quote: 0,         // 显示引用: [0=否, 1=是]
    is_show_context: 0,       // 显上下文: [0=否, 1=是]
    is_original_reply: 0,     // 原文答复: [0=否, 1=是]
    llm_models: '',           // 对话的模型
    llm_config: [],           // 模型的参数
    broadcast: {},            // 语音播报参
    knows: [],                // 关联知识库
    mcps: []                  // 关联MCP
})

/**
 * 切换选项
 *
 * @param index
 * @author zero
 */
const handleChangeTab = (index: number) => {
    tabIndex.value = index
}

/**
 * 提交保存
 */
const handleSubmit = async () => {
    postLoading.value = true
    const params = JSON.parse(JSON.stringify(formData.value))

    params.mcps = []
    params.knows = []
    params.llm_config = {}
    params.mcps.push(...formData.value.mcps.map((item: any) => item.code))
    params.knows.push(...formData.value.knows.map((item: any) => item.code))
    formData.value.llm_config.forEach((item: any) => {
        params.llm_config[item.key] = item.default
    })

    await robotSmarterApi.edit(params)
        .finally(() => {
            setTimeout(() => {
                postLoading.value = false
            }, 300)
        })

    emits('update')
    feedback.msgSuccess('保存成功')
}

watch(
    () => props.robot,
    async () => {
        const data = props.robot
        for (const key in formData.value) {
            // @ts-ignore
            if (data[key] !== null && data[key] !== undefined) {
                // @ts-ignore
                formData.value[key] = data[key]
            }
        }
        pageLoading.value = false
    }, {
        immediate: true
    }
)
</script>

<style scoped lang="scss">
.layout-forms {
    display: flex;
    flex-direction: column;
    width: 580px;
    min-width: 580px;
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    .footer-container {
        display: flex;
        align-items: center;
        justify-content: end;
        height: 60px;
        padding: 0 20px;
        border-top: 1px solid var(--el-border-color-lighter);
    }
}
</style>
